<template lang="pug">
SidebarCollapse(
  :model-value="true"
  aside-width="360px"
  tip-text="标本信息"
)
  template(
    #aside
  )
    SpecimenInfo(
      :specimen="currentSpecimen"
      @saved="onSaved"
    )
  data-page(
    v-bind="pageProps"
  )
    .container
      .container_left
        span(style="font-weight: 700") 当前标本:
        el-badge(
          v-for="(item,index) in statistics" 
          :key="index" 
          :value="item.value" 
          :label="item.label" 
          style="margin-left: var(--mt-margin); margin-top: calc(var(--unit) * -5)" color="var(--el-color-success)"
        )
          mt-button(
            @click="updateSpecimenStatus(item.state)" 
            link
            :class="{'is--active': item.state === specimenStatus}"
          ) {{ item.label }}
      .container_right
        mt-button(
          v-for="item of formatedActions" 
          :key="item.type"
          v-bind="item"
          @click="onAct(item)"
        )
    mt-table(
      v-bind="tableProps"
    )

  PrePrint(
    :model="prePrintEditingObj"
    @saved="onPreSaved"
  )

  SpecimenPrint(
    v-model="printModelVisible",
    :specimens="printingSpecimens"
    :mergeSpecimens="printingMergeSpecimens"
    @close="onPrintModelClose"
    @printed="onPrinted"
  )

  Cancellation(
    v-model="cancellationModelVisible"
    :selection-row="cancellationSpecimens"
    @message-to-parent="onCancelled"
  )

  Collection(
    v-model="collectModelVisible"
    :selection-row="collectingSpecimen"
    @message-to-parent="onCollected"
  )

  SampleTrajectory(
    v-model="trajectoryModelVisible"
    :selection-row="trajectorySpecimen"
  )
  batchCollection(
    v-model="batchCollectModelVisible"
    :selection-row="collectingSpecimens"
    @save="onBatchCollect"
  )
</template>

<script lang="ts" setup>
import { type IAction, SidebarCollapse } from "@scmt/common-components";
import type { SpecimenEntity } from "@scmt/api-lis-specimen";
import SpecimenInfo from "./compoments/SpecimenInfo.vue";
import { useData } from "./composbles/data";
import {
  useCurrentSpecimen,
  useSelectSpecimens,
  useSpecimenStatus,
} from "./composbles/specimen";
import { useStatistics } from "./composbles/statistics";
import { useSpecimenButtons } from "./composbles/buttons";
import {
  useCancellation,
  useCollection,
  useOnPageActions,
  usePrint,
  useTrajectory,
} from "./composbles/pageActions";
import { SpecimenPrint } from "@scmt/common-api-components";
import Cancellation from "./compoments/cancellation.vue";
import Collection from "./compoments/collection.vue";
import SampleTrajectory from "../components/sampleTrajectory.vue";
import batchCollection from "./compoments/batchCollection.vue";
import { useMerge } from "./composbles/merge";
import PrePrint from "./compoments/PrePrint.vue";

const { pageProps, tableProps, getData } = useData();
const { selectSpecimens } = useSelectSpecimens();
const { currentSpecimen, updateCurrentSpecimen } = useCurrentSpecimen();
const { statistics } = useStatistics();
const { listActions } = useSpecimenButtons();
const { specimenStatus, updateSpecimenStatus } = useSpecimenStatus();
const { onPageActions } = useOnPageActions();
const { loading: mergeLoading, generateBarcode } = useMerge();

const {
  prePrintEditingObj,
  printModelVisible,
  printingSpecimens,
  printingMergeSpecimens,
  onPreSaved,
} = usePrint();
const { cancellationModelVisible, cancellationSpecimens } = useCancellation();
const {
  collectModelVisible,
  collectingSpecimen,
  batchCollectModelVisible,
  collectingSpecimens,
} = useCollection();
const { trajectoryModelVisible, trajectorySpecimen } = useTrajectory();

const formatedActions = computed(() =>
  listActions.value.map((item) => {
    // 合管打印
    if (item.event === "merge-print") {
      return Object.assign({}, item, {
        loading: mergeLoading.value,
      });
    }

    return item;
  })
);

watch(
  specimenStatus,
  () => {
    getData();
  },
  {
    immediate: true,
  }
);

const onAct = (action: IAction) => {
  // 合并打印
  if (action.event === "merge-print") {
    generateBarcode(selectSpecimens.value).then((res) => {
      onPageActions(action, res);
    });
    return;
  }

  onPageActions(action);
};

const onSaved = (specimen: SpecimenEntity) => {
  updateCurrentSpecimen(specimen);
  updateSpecimenStatus(specimen.state);
  // 获取最新数据
  if (specimenStatus.value === specimen.state) {
    getData();
  }
};

// 作废成功
const onCancelled = () => {
  // 关闭弹窗
  cancellationModelVisible.value = false;
  // 获取最新数据
  getData();
};
// 收集成功
const onCollected = () => {
  collectModelVisible.value = false;
  // 获取最新数据
  getData();
};
const onPrinted = () => {
  printModelVisible.value = false;
};
const onPrintModelClose = (params: {
  generated: boolean;
  printed: boolean;
}) => {
  if (Object.values(params).some(Boolean)) {
    // 获取最新数据
    getData();
  }
};
const onBatchCollect = () => {
  batchCollectModelVisible.value = false;
  getData();
};
</script>

<style lang="less" scoped>
.container {
  margin-top: calc(var(--unit) * 6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--mt-margin);
  height: calc((var(--unit) * 32));
  font-size: var(--mt-fs-small);
  flex-shrink: 0;

  :deep(.el-timeline-item__timestamp.is-top) {
    font-size: 18px;
    color: #303133;
  }

  :deep(.el-button.is-link) {
    :hover {
      color: #1c7bef;
    }
  }

  .is--active {
    color: #1c7bef;
  }

  &__left {
    display: flex;
    align-items: center;
  }
  &__right {
    justify-content: right;
  }
}

@text-size: calc(var(--unit) * 20);

:deep(.el-table) {
  &__body {
    .group-text {
      position: relative;

      &::before {
        position: absolute;
        display: inline-block;
        color: var(--el-color-primary);
        font-size: var(--mt-fs-mini);
        top: 50%;
        transform: translate(-50%, -50%);
        content: "合";
        font-weight: 700;
        width: @text-size;
        height: @text-size;
        text-align: center;
        line-height: @text-size;
        border-radius: 50%;
        background-color: var(--el-color-white);
        z-index: 1;
      }
    }

    .group-text--offset {
      position: relative;
      &::before {
        top: -50%;
        transform: translate(-50%, 50%);
      }
    }
  }
}
</style>
